<#include "/layout/default.ftl">
<#include "./_common.ftl">

<#macro mainContainer>
<div class="container-fluid">
    <div class="content">
        <#if (!materialId?has_content || materialId == 0 || !courseId?has_content || courseId == 0)>
            <@emptyMaterialModal/>
            <h2>${i18n.material.noMaterialFoundTitle!"No materials found yet."}</h2>
            <p>${i18n.material.noMaterialFoundBody!"No materials found yet. Please feel free to come back soon for an updates."}</p>
        <#else >
            <@materialContent/>
        </#if>
    </div>
    <div class="push"></div>
</div>
</#macro>


<#macro materialContent>
    <div class="page-header">
        <h3>
            ${courseTitle}&nbsp;<small>${courseStartDate?date!"&mdash;"}&nbsp;/&nbsp;${courseFinishDate?date!""}</small>
        </h3>
    </div>
    <div class="row-fluid">
    <#-- Sidebar with course chapters. -->
        <div class="span3 materials-sidebar">
            <@sideMenu/>
        </div> <#-- /sidebar -->

    <#-- Materials content -->
        <div class="span9 pull-left">
            <div class="materials-content">
                <#if (sectionTitle?has_content && title?has_content)>
                    <h4 class="centered">
                        ${sectionTitle}&nbsp;/&nbsp;${title}&nbsp;
                            <small>
                                (${startDate?date!"&mdash;"}&nbsp;/&nbsp;${finishDate?date!"&mdash;"})
                            </small>
                    </h4>
                    <hr/>
                </#if>
                <#if materialShortDescription?has_content>
                    ${materialShortDescription}
                    <hr/>
                </#if>

                <#if videoUrl?has_content>
                    <div class="row-fluid">
                        <div class="span7" style="padding-left: 16%;">
                            <iframe width="640" height="360" src="${videoUrl}" frameborder="0" allowfullscreen></iframe>
                        </div>
                    </div>
                    <hr/>
                </#if>

                <#if text?has_content>
                    ${text}
                    <hr/>
                </#if>

                <#if slideUrl?has_content>
                    <iframe src="http://docs.google.com/viewer?url=${slideUrl}&embedded=true" width="99%" height="780" style="border: none;"></iframe>
                    <hr/>
                    <p class="centered"><a href="${slideDownload}"><i class="icon-download"></i> ${i18n.material.slide!"Download slide"}</a>.</p>
                    <hr/>
                </#if>
            </div>
        </div>
    </div>
</#macro>

<#-- Specific to materials view JS. -->
<#if (!materialId?has_content || materialId == 0 || !courseId?has_content || courseId == 0)>
    <#assign head_js_material>
        <@head_js>
        <script src="${baseUrl}/bootstrap/js/material/view.js"></script></@head_js>
    </#assign>
    <#macro head_js>${head_js_material}</#macro>
</#if>

<#-- Specify title -->
<#macro head_title>
    <title>
        <#if courseTitle?has_content && materialTitle?has_content>
            ${courseTitle}. ${materialTitle}
        </#if>
    </title>
</#macro>

<@render/>
